<template>
	<view class="content">
		<topBox></topBox>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="item.recruit_id">
				<view class="item-title">
					<text class="name">
						{{ item.recruit_type_work }}
					</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{ item.recruit_address }}</view>
					</view>
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">
							发布时间：{{item.recruit_create_time}}
						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
						
					</view>
<view class="flex" v-if="role === 'big'? true : false">
							<u-button type="primary" @click="reEdit(item.recruit_id)">编辑重发</u-button>
							<u-button v-if="item.recruit_status == 2" type="warning" :custom-style="customStyle"
								@click="downRecruit(item.recruit_id,index)">下架</u-button>
						</view>
				</view>
				<view class="" v-if="(item.intermediary_recruit != '' && item.intermediary_recruit.length > 0)">
					
					<view class="small_item bottom" style="margin: 10rpx 0;"
						v-for="(reItem, reIndex) in item.intermediary_recruit" :key="reItem.receiving_intermediary_rid">
						<view class="flex"
							style="height: 100rpx;line-height: 100rpx;justify-content: space-around;background: #999;">
							<u-avatar style="display: flex;" size="80" :src="reItem.avatarUrl" mode="circle"></u-avatar>
							<view class="td name">{{reItem.nickname}}</view>
							<view class="td phone" @click="callPhone(reItem.phone)">{{reItem.phone}}</view>
							<!-- <view class="td name">id： {{sGitem.receiving_id}}</view> -->
							<!-- <u-button v-if="!sGitem.receiving_submit_time" size="mini" type="primary" @click="showFormS(sGitem)">添加员工</u-button> -->
						</view>
						<view class="staff_info" style="margin: 10rpx 0;" v-for="(sGitem, sIndex) in reItem.receiving"
							:key="sGitem.receiving_id">
							<view class="tr flex border_bottom">
								<block v-if="sGitem.receiving_submit_time">
									<view class="td border_right over-word">{{sGitem.receiving_name || '-'}}</view>
									<view class="td phone border_right" @click="callPhone(sGitem.receiving_mobile)">
										{{sGitem.receiving_mobile || '-'}}</view>
								</block>
								<block v-else>
									<u-avatar class="td border_right" size="60" :src="sGitem.avatarUrl" mode="circle">
									</u-avatar>
									<view class="td border_right over-word">{{sGitem.nickname}}</view>
								</block>

								<view class="td code border_right">
									<u-button size="mini" type="primary" @click="showImg(sGitem)">身份证</u-button>
								</view>
								<!-- <view class="td phone over-word" style="flex: 1;">{{sGitem.receiving_id_card || '-'}}</view> -->
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">
									{{sGitem.receiving_time ? sliceStr(sGitem.receiving_time) : '-'}}
								</view>
								<view class="td phone border_right">
									{{sGitem.receiving_submit_time ? sliceStr(sGitem.receiving_submit_time) : '-'}}
								</view>
								<view class="td phone border_right">
									{{sGitem.receiving_entry_time ? sliceStr(sGitem.receiving_entry_time) : '-'}}
								</view>
								<view class="td">
									{{sGitem.receiving_quit_time ? sliceStr(sGitem.receiving_quit_time) : '-'}}
								</view>
							</view>
							<view class="tr flex">
								<view class="td border_right">报名</view>
								<view class="td phone border_right">提交</view>
								<!-- 没有提交 或者有了入职时间 -->
								<u-button class="td phone border_right"
									:disabled="!sGitem.receiving_submit_time || sGitem.receiving_entry_time "
									size="mini" type="primary" @click="changeState(sGitem,1)">入职</u-button>
								<!-- 没有提交日期 不能报名，不能离职， 报名> 提交> 入职> 离职 -->
								<!-- 没有入职时间 或者有了离职时间 -->
								<u-button class="td order_bottom" size="mini"
									:disabled="!sGitem.receiving_entry_time || sGitem.receiving_quit_time"
									type="primary" @click="changeState(sGitem,2)">离职</u-button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="bottom flex">
					<view class="small_item">
						<view class="tr flex">
							<view class="td">
								<u-avatar class="headImg" src="../../static/image/aboutus-logo.png" mode="square"></u-avatar>
							</view>
							<view class="td name">张三</view>
							<view class="td phone">13557886557</view>
						</view>
						<view class="staff_info">
							<view class="tr flex border_bottom">
								<view class="td flex name border_right">
									<view>
										<u-avatar class="headImg" src="../../static/image/aboutus-logo.png" mode="square"></u-avatar>
									</view>
									<view>张三</view>
								</view>
								<view class="td phone border_right">13557886557</view>
								<view class="td code border_right">
									<u-button size="mini" type="primary" @click="show=true">身份证</u-button>
								</view>
								<view class="td status">
									<u-button size="mini" type="primary">入职</u-button>
								</view>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">20.12.12</view>
								<view class="td phone border_right">20.12.13</view>
								<view class="td code border_right">20.12.14</view>
								<view class="td">20.12.15</view>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">报名</view>
								<view class="td phone border_right">提交</view>
								<view class="td code border_right">入职</view>
								<view class="td">离职</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 查看身份证 -->
			<u-popup v-model="showImgeModel" mode="center" width="600rpx" height="500rpx">
				<view class="codePup">
					<image class="del" src="/static/image/del.png" mode="" @click.stop="showImgeModel = false"></image>
					<image class="img" :src="imgCodeUrl" mode="aspectFill"></image>
				</view>
			</u-popup>
			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20"
				:margin-bottom="20" />
		</view>
		<tabBar :selected="1"></tabBar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import topBox from '../../components/top-box/top-box.vue';
	import tabBar from '../../components/tabBar/tabBar.vue';
	export default {
		components: {
			topBox,
			tabBar
		},
		data() {
			return {
				videoCurrTime: 0,
				videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
				customStyle: {
					background: '#E04110',
					border: 'none',
					color: '#fff'
				},
				loadStatus: 'nomore',
				params: {
					startRow: 1,
					rowSize: 6,
					latitudes: 32,
					longitudes: 43,
					status: 'FB'
				},
				list: [],
				imageCode: '',
				show: false,
				userId: '',
				role: uni.getStorageSync('role'),
				imgCodeUrl: '',
				showImgeModel: false,
			};
		},
		computed: {
			...mapState({
				// userId: state => state.userId
			})
		},
		onShow() {},
		onLoad(e) {
			this.userId = uni.getStorageSync('userId');
			let token = uni.getStorageSync('token');
			if (!token) {
				uni.navigateTo({
					url:'../login'
				})
				return false;
				// this.generateCode();
			}
			if (e && e.scene) {
				let scene = decodeURIComponent(e.scene);
				uni.setStorageSync('recId', e.scene);
			}

			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.params.latitudes = res.latitude;
					this.params.longitudes = res.longitude;
					this.postGetActivityList('up');
				}
			});
		},
		onPullDownRefresh() {
			this.dropDown();
		},
		onReachBottom() {
			this.pullUp();
		},
		onShareAppMessage(res) {
			const userInfo = uni.getStorageSync('userInfo')
			if (this.role == 'big') {
				const {
					id,
					name
				} = userInfo
				return {
					title: `嗨！我邀请你成为的专属代理啦`,
					imageUrl: '../../static/image/share.jpg',
					path: '/pages/share/invitation?recId=' + id + '&name=' + name
				}
			} else {
				return {
					title: `嗨！快来加入我们平台吧`,
					imageUrl: '../../static/image/share.jpg',
					path: 'pages/index/full-screen'
				}
			}
		},
		methods: {
			downRecruit(recruit_id,index) {
				// 下架招聘信息
				uni.showModal({
					title: '提示',
					content: '确定要下架当前岗位吗？',
					success: res => {
						if (res.confirm) {
							this.$u.api.postShelfReruit({
								recruit_id
							}).then(res => {
								if (res.status == true) {
									uni.showToast({
										title: res.msg,
										duration: 2000
									});
									this.list[index].recruit_status = 1;
									// this.params.startRow = 1
									// this.postGetActivityList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									});
								}
							})
						}
					}
				})
			},
			callPhone(phone) {
				if (!phone) return
				uni.makePhoneCall({
					phoneNumber: '' + phone
				})
			},
			showImg(sGitem) {
				this.imgCodeUrl = sGitem.receiving_id_card;
				this.showImgeModel = true
			},
			toDesc(recruit_id) {
				if (!recruit_id) {
					return uni.showToast({
						title: '数据异常，请稍后再试',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: '../preview/previewDetail?recruit_id=' + recruit_id
				})
				console.log(recruit_id)
			},
			goPublish() {
				uni.navigateTo({
					url: '../talent/publish-post'
				})
			},
			reEdit(recruit_id) { // 编辑重发
				uni.navigateTo({
					url: '/pages/talent/publish-post?reId=' + recruit_id
				})
			},
			clickFormView(event) {
				let formId = event.detail.formId;

				// 忽略开发者工具里边的formId
				if (formId && formId !== 'the formId is a mock one') {
					wx.request({
						method: 'POST',
						url: '/api/collectFormId', // 该接口只用来收集formId
						data: {
							formId: formId
						} // 只传了一个formId，因为openid和当前用户通常会事先在后台做一个关联，看具体业务了
					});
				}
				// 然后可以干其他事了，比如跳转页面，其他业务逻辑
				// TODO
			},
			makeCall(item) {
				uni.makePhoneCall({
					phoneNumber: item.recruit_link_tel
				});
			},
			queryActOrder() {
				return new Promise((resolve, reject) => {
					let params = {};
					this.$u.api.postQueryActOrder(params).then(res => {
						if (res.code == 1000) {
							let data = res.data;
							if (data.isfree) {
								uni.navigateTo({
									url: '/pages/order/place-order?id=' + data.id
								});
							}
							resolve();
						}
					});
				});
			},
			// 下拉刷新
			dropDown() {
				console.log('down');
				// 修改当前view的数据
				this.params.startRow = 1;
				// 加载下拉刷新的数据
				this.postGetActivityList('down');
			},
			// 上拉加载
			pullUp() {
				console.log('up');
				// 增加页数
				this.params.startRow++;
				// 请求获取数据
				this.postGetActivityList('up');
			},
			// 活动管理-查询活动列表
			postGetActivityList(type) {
				this.$u.api
					.postMyRecruits(this.params)
					.then(res => {
						uni.stopPullDownRefresh();
						if (res.status == true) {
							let data = res.data;
							// 如果是上拉加载
							if (type == 'up') {
								// 判断分页
								if (res.data.length <= this.params.rowSize) {
									for (var i = 0; i < res.data.length; i++) {
										this.list.push(res.data[i]);
									}
									this.loadStatus = 'loading';

									// 如果数量小于页容量，显示没有更多数据
									if (res.data.length < this.params.rowSize) {
										this.loadStatus = 'nomore';
									}
								} else {
									this.params.rowSize = res.data.total;
									this.loadStatus = 'nomore';
								}
							}

							// 如果是下拉刷新
							if (type == 'down') {
								// 将数据
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}

								this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
							}
						}
					})
					.catch(err => {
						uni.stopPullDownRefresh();
					});
			},
			placeOrder(itemId) {
				let token = uni.getStorageSync('token');
				if (token) {
					let params = {
						id: itemId
					};
					this.$u.api.postReceiving(params).then(res => {
						if (res.status == true) {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000
							});
						}
					});
				} else {
					uni.redirectTo({
						url: '/pages/login'
					});
				}
			},
			generateCode() {
				let params = {
					busiType: 1,
					busiId: uni.getStorageSync('userId') + ',GG',
					url: 'pages/index/index'
				};
				this.$u.api.postGenerateQrCode(params).then(res => {
					if (res.status == true) {
						this.imageCode = 'data:image/jpeg;base64' + res.data;
					}
				});
			},
			close() {
				this.show = false
			},
			changeState(row, status) {
				this.$u.api.changeStatus({
					receiving_id: row.receiving_id,
					receiving_status: status
				}).then(res => {
					if (res.status == true) {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
						this.list = []
						this.params.startRow = 1
						this.postGetActivityList('up');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			sliceStr(str) {
				if (!str || typeof str !== 'string') return
				return str.slice(0, 10).replace(/-/g, '.')
			}
		}
	};
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		position: relative;
		// padding-top: 240upx;
		padding-bottom: 30rpx;

		.publish_btn {
			margin: 20upx;
		}

		.list-wrap {
			padding: 0 20upx 20upx;
			position: relative;
			z-index: 10;

			.list-item {
				padding: 30upx 20upx 10upx;
				background: #fff;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
				border-radius: 6px;
				margin-bottom: 20upx;

				.item-title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24upx;

					.name {
						font-size: 30upx;
						font-weight: bold;
						color: rgba(101, 101, 101, 1);
					}

					.price {
						font-size: 26upx;
						font-weight: bold;
						color: rgba(236, 71, 21, 1);
					}
				}

				.item-con {
					border-bottom: 1px solid rgba(221, 221, 221, 1);
					margin-bottom: 10upx;
					padding-bottom: 10upx;

					.con-row {
						display: flex;
						font-size: 24upx;
						font-weight: 500;
						color: rgba(101, 101, 101, 1);
						line-height: 34upx;
						margin-bottom: 18upx;

						.txt {
							flex: none;
							color: #999;
							margin-right: 10upx;
						}

						.txt-info {
							flex: 1;
						}
					}

					.flex-row {
						display: flex;
						justify-content: space-between;

						.row {
							font-size: 24upx;
							font-weight: 500;
							color: rgba(153, 153, 153, 1);
							margin-bottom: 18upx;
						}
					}

					.img-box {
						flex: 1;
						margin-right: 20upx;

						.img {
							width: 90upx;
							height: 90upx;
							border-radius: 6px;
							margin-right: 10upx;
						}
					}
				}

				.bottom {
					border: 1px solid #C0C0C0;

					.tr {
						// padding: 0upx 10upx;
					}
				}

				.small_item {
					margin: 20rpx 0;
					width: 100%;

					.item_top {
						padding-top: 10upx;
						background-color: #E04110;
						color: #FFFFFF;
					}

					.headImg {
						width: 50upx;
						height: 50upx;
						border-radius: 100upx;
					}

					.staff_info {
						border-top: 1px solid #C0C0C0;

						// display: table;
						// margin-bottom: 20upx;
						.td {
							width: 25%;
							height: 80upx;
							word-break: break-word;
							text-align: center;

							&.phone {
								width: 30%;
							}

							&.code {
								width: 20%;
							}
						}

						.td:not(.name) {
							line-height: 80upx;
						}

						.border_right {
							border-right: 1px solid #C0C0C0;
						}

						.border_bottom {
							border-bottom: 1px solid #C0C0C0;
						}
					}
				}
			}
		}
	}

	.upload-img {
		display: inline-block;
		width: 146rpx;
		height: 146rpx;
		margin: 14rpx;
		text-align: center;
		color: #999999;
		border: 2rpx solid #E1E1E1;
		border-radius: 4rpx;
		padding: 40rpx 0;
		background: #eee;
	}

	.codePup {
		position: relative;
	}

	.codePup .img {
		width: 500upx;
		height: 500upx;
	}

	.del {
		width: 100rpx !important;
		height: 100rpx !important;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
	}

	.over-word {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.popup {
		margin: 20upx;
	}
</style>
<!-- 
<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 146upx;
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}
			
			.bottom{
				border: 1px solid #C0C0C0;
				.tr{
					padding: 0upx 10upx;
				}
			}
			.small_item {
				margin: 10upx 0;
				width: 100%;
				.headImg {
					width: 80upx;
					height: 80upx;
					border-radius: 100upx;
				}
				.staff_info{
					border-top: 1px solid #C0C0C0;
					margin-bottom: 20upx;
					.td{
						width: 25%;
						height: 100upx;
						word-break: break-word;
						text-align: center;
						&.phone{
							width: 30%;
						}
						&.code{
							width: 20%;
						}
					}
					.td:not(.name){
						line-height: 100upx;
					}
					.border_right{
						border-right: 1px solid #C0C0C0;
					}
					.border_bottom{
						border-bottom: 1px solid #C0C0C0;
					}
				}
			}
		}
	}
}
.codePup {
	position: relative;
}

.codePup .img {
	width: 500upx;
	height: 500upx;
}

.del {
	width: 80rpx !important;
	height: 80rpx !important;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
}
</style>
 -->
